import React, { Component } from 'react'
import Han from '../../components'
const {Header} = Han



export default class Record extends Component {
    state={
        bar:[
            {
                name:'健康上报',
                api:this.$api.LIST_HEALTH
            },
            {
                name:'口罩预约',
                api:this.$api.LIST_PAY
            }
        ],
        healthList:[],
        payList:[],
        defaultKey:parseInt(this.props.match.params.index)
    }

    // 更新页面数据
    initData = ()=>{

        const {defaultKey} = this.state;

        let defaultApi = defaultKey?this.$api.LIST_PAY:this.$api.LIST_HEALTH;

        this.$httpReq(defaultApi({user:localStorage.user}),res=>this.setState({[defaultKey?'payList':'healthList']:res.data}))
    }
    // 选项卡切换
    barClick = defaultKey =>this.setState({defaultKey},()=> this.initData())
       
    // 取消预约
    cancelOrder = orderid => this.$httpReq(this.$api.ORDER_CANCEL({orderid}),res=>{
        alert(res.msg)
        this.initData()
    })

    render() {
       
        const {bar,defaultKey,healthList,payList} = this.state
        return (
            <div className="record_list">
               {/* 头部 */}
               <Header title="我的记录" path="/home/my"/>
                
                <div className="tab_bar">
                    {
                        bar.map((item,key)=>(<span key={key} className={['bar_unit',defaultKey===key?'active':''].join(' ')} onClick={()=>this.barClick(key)}>{item.name}</span>))
                    }
                </div>
                {
                    defaultKey?<div>
                        {
                            payList.map(item=>(
                                <div className="list_form" key={item.orderid}>
                                    <div className="list_form_title">{item.shopName}</div>
                                    <div className="list_form_text">店铺地址：{item.address}</div>
                                    <div className="list_form_text">口罩数量：{item.num}</div>
                                    <div className="list_form_text">预约电话：{item.appointmentPhone}</div>
                                    <div className="list_form_text">预约时间：{item.appointmentTime}</div>
                                    <div className="list_form_btn" onClick={()=>this.cancelOrder(item.orderid)}>
                                        {item.status==='ok'?'取消预约':<span className="gray_btn">{item.status==='cancel'?'已取消':<span className="blue_btn">{item.status==='done'?'已完成':'已过期'}</span>}</span>}
                                    </div>
                                </div>
                            ))
                        }
                    </div>:<div>
                        {
                            healthList.map(item=>(
                                <div className="list_form" key={item.id} onClick={()=>this.props.history.push('/detail/'+item.id)}>
                                    <div className="list_form_title">
                                        {item.city}—{item.area}
                                        <span className="submit_date">{this.$getDate(item.submitDate)}</span>
                                    </div>
                                    <div className="list_form_text">{item.address}</div>
                                    <div className="list_form_btn">查看详情</div>
                                </div>
                            ))
                        }
                    </div>
                }
            </div>
        )
    }

    componentDidMount= ()=> this.initData()
}
